<template>
  <div style="height:800px ;position: relative;float: left;width: 900px;">
        <p>各地每日天猫订单量——2月份</p>
    <svg style="height:800px ;position: relative;float: left;width: 900px;" id="svg">
    </svg>
    </div>
</template>
<script>
import * as d3 from "d3";
export default {
  data(){
    return{
      data:[]
    }
  },
  created(){
    this.test()
  },
  methods:{
    test(){
      d3.csv('http://cdn.ptianya.top/data2.csv').then((d)=>{
            //处理数据,转换d=>value
            let value=d
            console.log(value)
            //console.log(value[i]['日期'])
            for(let i=0;i<810;i++){
                value[i]['日期']=d[i]['日期'].split('[')[1]
            }
            //异步操作，使得value和d等价
            //console.log(value)

            //数据01号
            //处理数据，得到按顺序排列的日期数组day
            let day0={}
            let city0={}
            for(let i=0;i<810;i++){
                day0[value[i]['日期']]=0
                value[i]['城市']=value[i]['城市'].split("'")[1].split("'")[0]
                city0[value[i]['城市']]=0
            }
            let day=Object.keys(day0).sort()
            //let city1=Object.keys(city0)
            //console.log(city1)
            //console.log(day)

            //g1是main中的svg标签，移动g标签20，20,容器大小：height:800px ;width: 500px;
            let g1=d3.select('#svg').attr('transform','translate(20,20)')

            let times=0
            //得到过滤后的day1数据，降序排序并添加排名
            let data1=value.filter((d)=>d['日期']==day[times])
            .sort((a,b) => b['数量'] - a['数量'])
            data1.forEach((d,i)=>d['排名']=i+1)
            //console.log(data1)

            //建立x，y比例尺
            let max=data1[0]['数量']
            let xScale=d3.scaleLinear()
            .domain([0,max])
            .range([0,800])

            let yScale=d3.scaleLinear()
            .domain([30,1])
            .range([700,0])

            let cScale=d3.scaleLinear()
            .domain([0,400])
            .range([d3.hsl(250,0.75,0.75,0.8),d3.hsl(360,0.75,0.75,0.8)])

            let xAis=d3.axisTop(xScale)
            g1.append('g')
            .call(xAis)
            .attr('fill','black')
            .attr('transform','translate(' + 0 + ',' + 20 + ')')
            .attr('class','xAis')
            //x轴相对g1 x:0,y:20
            //x轴添加在g1的g上

            //添加矩形在g1上
            g1.selectAll('rect')
            .data(data1)
            .join('rect')
            .attr('fill',d=>cScale(d['数量'])) 
            .attr('width',d=>xScale(d['数量']))
            .attr('height',20)
            .attr('x',0)
            .attr('y',d=>yScale(d['排名'])+20)
            .attr('class','rect')
            
            //添加城市、数值，在g1的g上
            g1.append('g')
            .selectAll('text')
            .data(data1)
            .join('text')
            .text(d=>d['城市'])
            .attr('x',d=>xScale(d['数量']))
            .attr('y',d=>yScale(d['排名'])+20+15)
            .attr('class','city')

            g1.append('g')
            .selectAll('text')
            .data(data1)
            .join('text')
            .text(d=>d['数量'])
            .attr('x',d=>xScale(d['数量'])-10)
            .attr('y',d=>yScale(d['排名'])+20+15)
            .attr('class','number')
            .attr('text-anchor','end')

            //添加日期在g1的g上
            let daylabel=1
            g1.append('text')
            .text(daylabel)
            .attr('x',800)
            .attr('y',700)
            .attr('text-anchor','end')
            .attr('font-size','200%')
            .attr('fill','black')
            .attr('class','daylabel')

            let ticker=d3.interval(function(){
                //首先重新过滤数据

                times++
                let data2=value.filter((d)=>d['日期']==day[times])
                .sort((a,b) => b['数量'] - a['数量'])
                data2.forEach((d,i)=>d['排名']=i+1)

                //重新绑定坐标轴
                let max2=data2[0]['数量']
                xScale.domain([0,max2])
                g1.select('.xAis')
                .transition()
                .duration(1000)
                .call(xAis)
                
                //重新绑定矩形
                g1.selectAll('.rect')
                .data(data2)
                .transition()
                .duration(500)
                .attr('width',d=>xScale(d['数量']))
                .attr('y',d=>yScale(d['排名'])+20)
                .attr('fill',d=>cScale(d['数量'])) 
                

                g1.selectAll('.city')
                .data(data2)
                .transition()
                .duration(1000)
                .text(d=>d['城市'])
                .attr('x',d=>xScale(d['数量']))
                .attr('y',d=>yScale(d['排名'])+20+15)

                g1.selectAll('.number')
                .data(data2)
                .transition()
                .duration(1000)
                .text(d=>d['数量'])
                .attr('x',d=>xScale(d['数量'])-10)
                .attr('y',d=>yScale(d['排名'])+20+15)
                .tween('text',function(d){
                    let i=d3.interpolateRound(0,d['数量'])
                    return function(t){
                        this.textContent=i(t)
                    }
                }
                )

                daylabel++
                if(daylabel==8){
                    daylabel=9
                }
                if(daylabel==16){
                    daylabel=17
                }
                g1.select('.daylabel')
                .transition()
                .duration(1000)
                .text(daylabel)
                .attr('x',800)
                .attr('y',700)
                .attr('text-anchor','end')
                .attr('font-size','200%')
                .attr('fill','black')

                if(times>26)
                ticker.stop()
            },1500)

        })
    }
  }
}
</script>